<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- <meta http-equiv="Cache-Control" content="no-cache" /> -->
<meta charset="utf-8" />
<meta name="description" content="overview &amp; stats" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="../../ace/assets/css/bootstrap.css" />
<link rel="stylesheet" href="../../ace/assets/css/font-awesome.css" />

<!-- page specific plugin styles -->

<!-- text fonts -->
<link rel="stylesheet" href="../../ace/assets/css/ace-fonts.css" />

<!-- ace styles -->
<link rel="stylesheet" href="../../ace/assets/css/ace.css"
	class="ace-main-stylesheet" id="main-ace-style" />
	
<!-- page specific plugin styles -->
<link rel="stylesheet" href="../../ace/assets/css/select2.css" />
	<link rel="stylesheet" href="../../ace/assets/css/chosen.css" />


<!--[if lte IE 9]>
			<link rel="stylesheet" href="../../ace/assets/css/ace-part2.css" class="ace-main-stylesheet" />
		<![endif]-->

<!--[if lte IE 9]>
		  <link rel="stylesheet" href="../../ace/assets/css/ace-ie.css" />
		<![endif]-->

<!-- inline styles related to this page -->

<!-- ace settings handler -->
<script src="../../ace/assets/js/ace-extra.js"></script>

<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

<!--[if lte IE 8]>
		<script src="../../ace/assets/js/html5shiv.js"></script>
		<script src="../../ace/assets/js/respond.js"></script>
		<![endif]-->




	
		
<style>

	/*须知界面*/
.xuzhi{width:890px;margin:20px auto;border: 1px solid #ececec;background:#fff;padding:20px;-moz-box-shadow: 1px 1px 10px #909090;/*firefox*//* -webkit-box-shadow: 1px 1px 10px #909090; *//*safari或chrome*/box-shadow: 2px 1px 10px #c8c8c8;/*opera或ie9*/clear:both;height:550px;}
.xuzhi .content{height:380px;overflow:auto;}
.xuzhi .content h2{text-align:center;margin-bottom:10px;border-bottom:1px solid #ccc;padding-bottom:10px;}
.xuzhi .content p{ text-indent:2em; line-height:30px; color:#555;}
.xuzhi h3{border-top:1px solid #ccc;margin:20px 0;padding-top:10px;text-align:center;}
.xuzhi h3 span{ display:inline-block;  margin-left:5px; font-size:16px; font-weight:normal;}
.xuzhi h1{ text-align:center;}
.xuzhi h1 a{ background:#139de2; border-radius:3px; color:#fff; font-size:16px; margin-top:10px; cursor:pointer; text-align:center; padding:7px 50px;}
.xuzhi h1 a:hover{ background:#0a8ed0;}

	/**/
p{ text-indent:2em; line-height:30px; color:#555;}
</style>
<title>名称自主申报</title>
</head>
<body class="no-skin">
	<jsp:include page="include/navbar.jsp"></jsp:include>
	<div class="main-container " id="main-container">
	
		<!-- /section:basics/sidebar -->
		<div class="main-content ">
			<div class="page-header">
							<h1>
								Treeview
								<small>
									<i class="ace-icon fa fa-angle-double-right"></i>
									with selectable items(single &amp; multiple) and custom icons
								</small>
							</h1>
			</div><!-- /.page-header -->
			
			
				<div class="row"> 	<!-- #section:plugins/fuelux.treeview -->
									<div class="col-sm-6">
										<div class="widget-box widget-color-blue2">
											<div class="widget-header">
												<h4 class="widget-title lighter smaller">经营范围选择</h4>
												<div class="widget-toolbar">
													<label> <small class="green"> 
													</small>   
														<input type="checkbox" name="myoption[]" class="ace" />
  														<span class="lbl">常用的50项经营范围 </span>
													</label>
												</div>
											</div>

											<div class="widget-body">
												<div class="widget-main padding-8">
													<ul id="tree1"></ul>
												</div>
											</div>
										</div>
									</div>
									<div class="col-sm-1" style="height: 300px;/* vertical-align: middle; */">
										<button class="btn btn-warning" id="gritter-add" style="
																						    margin-bottom: 20px;
																						    margin-top: 200px;
																						">添加</button>
										<button class="btn btn-inverse" id="gritter-remove">删除</button>
										
									</div>
									<div class="col-sm-3">
										<div>
											<label for="form-field-select-1">一般经营范围</label>

											<select class="form-control" id="form-field-select-1" multiple="multiple">
												
											</select>
										</div>
										
										<div>
												<label for="form-field-select-2">许可经营范围</label>

												<select class="form-control" id="form-field-select-2" multiple="multiple">
															
										
												</select>
										</div>
									</div>
									<div class="col-sm-1" style="height: 300px;/* vertical-align: middle; */">
										<button class="btn btn-error" id="gritter-add" style="
																						    margin-bottom: 20px;
																						    margin-top: 200px;
																						">确认</button>
										<button class="btn btn-error" id="gritter-error">返回</button>
										
									</div>
										<style >
											#form-field-select-2,#form-field-select-1{
														height:300px;		
											}
										</style>
									
									
					<script type="text/javascript">
						var $assets = "../assets";//this will be used in fuelux.tree-sampledata.js
					</script>
					
				</div>		<!-- /section:plugins/fuelux.treeview -->
				
		
		
		
		
		
		
		
		</div>
	</div>
	
	
	
	
	
		
		<!--[if !IE]> -->	
		<script type="text/javascript">
			window.jQuery || document.write("<script src='../../ace/assets/js/jquery.js'>"+"<"+"/script>");
		</script>

		<!-- <![endif]-->

		<!--[if IE]>
			<script type="text/javascript">
			 window.jQuery || document.write("<script src='../../ace/assets/js/jquery1x.js'>"+"<"+"/script>");
			</script>
		<![endif]-->
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
		<script src='../../ace/assets/js/jquery.js'></script>
		<!-- 	<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='../../ace/assets/js/jquery.mobile.custom.js'>"+"<"+"/script>");
		</script> -->
		<script src="../../ace/assets/js/bootstrap.js"></script>

		<!-- page specific plugin scripts -->

		<!--[if lte IE 8]>
		  <script src="../../ace/assets/js/excanvas.js"></script>
		<![endif]-->
		<script src="../../ace/assets/js/jquery-ui.custom.js"></script>
		<script src="../../ace/assets/js/jquery.ui.touch-punch.js"></script>
		<script src="../../ace/assets/js/jquery.easypiechart.js"></script>
		<script src="../../ace/assets/js/jquery.sparkline.js"></script>
		<script src="../../ace/assets/js/flot/jquery.flot.js"></script>
		<script src="../../ace/assets/js/flot/jquery.flot.pie.js"></script>
		<script src="../../ace/assets/js/flot/jquery.flot.resize.js"></script>

		<!-- ace scripts -->
		<script src="../../ace/assets/js/ace/elements.scroller.js"></script>
		<script src="../../ace/assets/js/ace/elements.colorpicker.js"></script>
		<script src="../../ace/assets/js/ace/elements.fileinput.js"></script>
		<script src="../../ace/assets/js/ace/elements.typeahead.js"></script>
		<script src="../../ace/assets/js/ace/elements.wysiwyg.js"></script>
		<script src="../../ace/assets/js/ace/elements.spinner.js"></script>
		<script src="../../ace/assets/js/ace/elements.treeview.js"></script>
		<script src="../../ace/assets/js/ace/elements.wizard.js"></script>
		<script src="../../ace/assets/js/ace/elements.aside.js"></script>
		<script src="../../ace/assets/js/ace/ace.js"></script>
		<script src="../../ace/assets/js/ace/ace.ajax-content.js"></script>
		<script src="../../ace/assets/js/ace/ace.touch-drag.js"></script>
		<script src="../../ace/assets/js/ace/ace.sidebar.js"></script>
		<script src="../../ace/assets/js/ace/ace.sidebar-scroll-1.js"></script>
		<script src="../../ace/assets/js/ace/ace.submenu-hover.js"></script>
		<script src="../../ace/assets/js/ace/ace.widget-box.js"></script>
		<script src="../../ace/assets/js/ace/ace.settings.js"></script>
		<script src="../../ace/assets/js/ace/ace.settings-rtl.js"></script>
		<script src="../../ace/assets/js/ace/ace.settings-skin.js"></script>
		<script src="../../ace/assets/js/ace/ace.widget-on-reload.js"></script>
		<script src="../../ace/assets/js/ace/ace.searchbox-autocomplete.js"></script>



		<!-- page specific plugin scripts -->
		<script src="../../ace/assets/js/fuelux/fuelux.wizard.js"></script>
		<script src="../../ace/assets/js/jquery.validate.js"></script>
		<script src="../../ace/assets/js/additional-methods.js"></script>
		<script src="../../ace/assets/js/bootbox.js"></script>
		<script src="../../ace/assets/js/jquery.maskedinput.js"></script>
		<script src="../../ace/assets/js/select2.js"></script>
		<script src="../../ace/assets/js/fuelux/fuelux.tree.js"></script>
		
	
		
		
		
		<!-- inline scripts related to this page -->
			<!-- inline scripts related to this page -->
		<script type="text/javascript">
		
		
		function initiateDemoData(){
			

			var tree_data = {
				'a' : {text: '农、林、牧、渔业', type: 'folder'}	,
				'b' : {text: '采矿业', type: 'folder'}	,
				'c' : {text: '制造业（含再制造）', type: 'folder'}	,
				'd' : {text: '电力、热力、燃气及水生产和供应业', type: 'folder'}	,
				'e' : {text: '建筑业', type: 'folder'}	,
				'f' : {text: '批发和零售业', type: 'item'}	,
				'g' : {text: '交通运输、仓储和邮政、快递业', type: 'item'}	,
				'h' : {text: '住宿和餐饮业', type: 'folder'}	,
				'i' : {text: '信息传输、软件和信息技术服务业', type: 'folder'}	,
				'j' : {text: '金融业', type: 'folder'}	,
				'k' : {text: '房地产业', type: 'folder'}	,
				'l' : {text: '租赁和商务服务业', type: 'folder'}	,
				'm' : {text: '科学研究和技术服务业', type: 'folder'}	,
				'n' : {text: '水利、环境和公共设施管理业', type: 'folder'}	,
				'o' : {text: '居民服务、修理和其他服务业', type: 'folder'}	,
				'p' : {text: '教育', type: 'folder'}	,
				'q' : {text: '卫生和社会工作', type: 'folder'}	,
				'e' : {text: '文化、体育和娱乐业', type: 'folder'}	,
				's' : {text: '公共管理、社会保障和社会组织', type: 'folder'}	,
				't' : {text: '国际组织', type: 'folder'}	
				
			};
			tree_data['d']['additionalParameters'] = {
				'children' : {
					'a' : {text: '电力、热力生产和供应业', type: 'folder'},
					'b' : {text: '燃气生产和供应业', type: 'folder'},
					'c' : {text: '水的生产和供应业', type: 'folder'}

				}
			};
			tree_data['d']['additionalParameters']['children']['a']['additionalParameters'] = {
				'children' : {
					'a' : {text: '电力生产', type: 'folder'},
					'b'	: {text:'太阳能发电站运营',type:'item'},
					'c' : {text: '其他电力生产', type: 'folder'},
					'd' : {text: '电力供应', type: 'folder'},
					'e' : {text: '热力生产和供应', type: 'folder'}
				}
			};
			tree_data['d']['additionalParameters']['children']['a']['additionalParameters']['children']['a']['additionalParameters']  = {
				'children' : {
					'a' : {text: '火力发电', type: 'item'},
					'b' : {text: '水力发电', type: 'item'},
					'c' : {text: ' 核力发电', type: 'item'},
					'd' : {text: '风力发电', type: 'item'},
					'e' : {text: ' 太阳能发电', type: 'item'}
					
				}
			};
			tree_data['d']['additionalParameters']['children']['a']['additionalParameters']['children']['c']['additionalParameters']  = {
					'children' : {
						'a' : {text: '潮汐能发电', type: 'item'},
						'b' : {text: '沼气发电', type: 'item'},
						'c' : {text: '地热能发电', type: 'item'},
						'd' : {text: '生物质能发电', type: 'item'}
						
					}
				};
			tree_data['d']['additionalParameters']['children']['a']['additionalParameters']['children']['d']['additionalParameters']  = {
					'children' : {
						'a' : {text: ' 电力供应', type: 'item'},
						'b' : {text: '售电业务', type: 'item'}
						
					}
				};
			tree_data['d']['additionalParameters']['children']['a']['additionalParameters']['children']['e']['additionalParameters']  = {
					'children' : {
						'a' : {text: '热力生产和供应', type: 'item'}
						
					}
				};
		
		
			
			var dataSource1 = function(options, callback){
				var $data = null
				if(!("text" in options) && !("type" in options)){
					$data = tree_data;//the root tree
					callback({ data: $data });
					return;
				}
				else if("type" in options && options.type == "folder") {
					if("additionalParameters" in options && "children" in options.additionalParameters)
						$data = options.additionalParameters.children || {};
					else $data = {}//no data
				}
				
				if($data != null)//this setTimeout is only for mimicking some random delay
					setTimeout(function(){callback({ data: $data });} , parseInt(Math.random() * 500) + 200);

			}
			return {'dataSource1': dataSource1 }
			
		}
		
		/*树行为（节点点击） e:事件  ,d:数据*/
		function treeAction(e, d){
			var items = $('#tree1').tree('selectedItems'),
				item,
				newOption;
			
			for(var i in items) if (items.hasOwnProperty(i)) {
			   	   item = items[i];
			   	   newOption='<option value="'+item.text+'">'+item.text+'</option>';
			   	$('[value='+item.text+']').remove();
			  if(item.text==='热力生产和供应'){
				  $('#form-field-select-1').append(newOption);
				 
			  }else{
				  $('#form-field-select-2').append(newOption);
			  }
				 
			}
		}
		
			
				
			
			jQuery(function($){
				//debugger;
				var sampleData = initiateDemoData();
				

				$('#tree1').ace_tree({
					dataSource: sampleData['dataSource1'],
					multiSelect: true,
					cacheItems: true,
					'open-icon' : 'ace-icon tree-minus',
					'close-icon' : 'ace-icon tree-plus',
					'selectable' : true,
					'selected-icon' : 'ace-icon fa fa-check',
					'unselected-icon' : 'ace-icon fa fa-times',
					loadingHTML : '<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>'
				});
				
				
				$('#gritter-add').on('click',function (e,d){
					 treeAction(e, d);
				});
				$('#gritter-remove').on('click',function (e,d){
					
					$('option:selected').remove();
				});
				
				
			
			});
		</script>
		

	

</body>
</html>